<template>
  <LayoutView :select-index="2">
    <div v-if="categoryList.length>0">
      <div class="category-list">
        <el-tag size="small" @click="selectAll" :effect="effectAll" class="category-item">全部</el-tag>
        <el-tag size="small" class="category-item" v-for="(item,index) in categoryList" @click="selectItem(item.categoryId,index)" :effect="selectIndex === index ? 'dark':'plain'" :key="item.categoryId">{{item.categoryName}}</el-tag>
      </div>
      <BookList :book-list="bookList" show-type show-status/>
      <div style="text-align: center;margin-top: 15px">
        <el-pagination hide-on-single-page background layout="prev,pager,next" :total="pageInfo.total" :current-page="pageInfo.page" :page-size="pageInfo.limit" @current-change="currentChange"/>
      </div>
    </div>

    <div v-else style="text-align: center">暂无分类!</div>
  </LayoutView>
</template>

<script>
import LayoutView from '@/views/front/components/LayoutView.vue'
import BookList from '@/views/front/components/BookList.vue'
export default {
  name: 'CategoryView',
  components: { BookList, LayoutView },
  data () {
    return {
      baseImageUrl: process.env.VUE_APP_BASE_URL + '/img/',
      categoryList: [],
      bookList: [],
      pageInfo: {
        page: 1,
        total: 0,
        limit: 9
      },
      selectIndex: -1,
      categoryId: '',
      effectAll: 'dark'
    }
  },
  methods: {
    getCategoryList () {
      this.$http.get('api/book/category').then(({ data }) => {
        this.categoryList = [...data]
      })
    },
    getBookList () {
      let url = 'api/book/list'
      if (this.categoryId) {
        url = `api/book/category/${this.categoryId}`
      }
      this.$http.get(url, this.pageInfo).then(({ data }) => {
        this.bookList = [...data.records]
        this.pageInfo.page = data.current
        this.pageInfo.limit = data.size
        this.pageInfo.total = data.total
      })
    },
    currentChange (val) {
      this.pageInfo.page = val
      this.getBookList()
    },
    selectAll () {
      this.pageInfo.page = 1
      this.effectAll = 'dark'
      this.selectIndex = -1
      this.categoryId = ''
      this.getBookList()
    },
    selectItem (categoryId, index) {
      this.pageInfo.page = 1
      this.effectAll = 'plain'
      this.selectIndex = index
      this.categoryId = categoryId
      this.getBookList()
    }
  },
  created () {
    this.getCategoryList()
    this.getBookList()
  }
}
</script>

<style scoped lang="scss">
.category-list{
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;
  .category-item{
    margin: 5px;
    cursor: pointer;
  }
}
</style>
